@import 'open-props/postcss/style';
@import 'open-props/postcss/normalize';

:root {
  font-family: var(--font-mono);
  body {
    background-color: var(--gray-9);
    display: grid;
    place-content: center;
    height: 100vh;
    width: 100vw;
  }
}

#app {
  display: grid;
  grid-auto-flow: column;
  gap: 3em;
  div {
    border: solid 100px var(--gray-0);
    border-color: transparent;
    width: 0;
    height: 0;
    &:nth-of-type(1) {
      border-top-color: var(--purple-6);
    }
    &:nth-of-type(2) {
      border-right-color: var(--orange-6);
    }
    // &:nth-of-type(3) {
    // border-bottom-color: var(--teal-7);
    // }
    // &:nth-of-type(4) {
    // border-left-color: var(--blue-5);
    // }
  }
}
